<template>
	<view>
		<view class="order-submission">
			<view class="allAddress" :style="systemStore ? '' : 'padding-top: 0.2*100rpx'">
				<view class="nav acea-row">
					<view class="item font-color-red" :class="shipping_type === 0 ? 'on' : 'on2'"
						@click="addressType(0)" v-if="systemStore"></view>
					<!-- <view class="item font-color-red" :class="shipping_type === 1 ? 'on' : 'on2'" @click="addressType(1)" v-if="systemStore && !isIntegral"></view> -->
				</view>
				<view class="address acea-row row-between-wrapper" v-if="shipping_type === 0" @click="addressTap">
					<view class="addressCon" v-if="addressInfo.realName">
						<view class="name">
							{{ addressInfo.realName }}
							<text class="phone">{{ addressInfo.phone }}</text>
						</view>
						<view>
							<text class="default font-color-red" v-if="addressInfo.isDefault">[默认]</text>
							{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}{{ addressInfo.detail }}
						</view>
					</view>
					<view class="addressCon" v-else>
						<view class="setaddress">设置收货地址</view>
					</view>
					<view class="iconfont icon-jiantou"></view>
				</view>
				<div class="address acea-row row-between-wrapper" v-if="shipping_type === 1" @click="showStoreList">
					<div class="addressCon" v-if="storeItems">
						<div class="name">
							{{ storeItems.name }}
							<span class="phone">{{ storeItems.phone }}</span>
						</div>
						<div>{{ storeItems.address }}</div>
					</div>
					<div class="addressCon" v-else>
						<div class="name">
							{{ systemStore.name }}
							<span class="phone">{{ systemStore.phone }}</span>
						</div>
						<div>{{ systemStore.address }}</div>
					</div>
					<div class="iconfont icon-jiantou"></div>
				</div>
				<view class="line">
					<image src="@/static/images/line.jpg" />
				</view>
			</view>
			<OrderGoods :evaluate="0" :isIntegral="isIntegral" :classify="classify" :cartInfo="orderGroupInfo.cartInfo">
			</OrderGoods>
			<view class="wrapper">
				<view class="item acea-row row-between-wrapper" @click="couponTap"
					v-if="deduction === false && !isIntegral&&classify!==3">
					<view>优惠券</view>
					<view class="discount">
						{{ usableCoupon.couponTitle || '请选择' }}
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper"
					v-if="!isIntegral && deduction === false && enableIntegral === true&& classify === 3">
					<view>积分抵扣</view>
					<view class="discount">
						<view class="select-btn">
							<view class="checkbox-wrapper">
								<!-- <input type="checkbox" v-model="useIntegral" @click="changeUseIntegral"/> -->
								<checkbox-group @change="changeUseIntegral">
									<label class="well-check">
										<text class="integral">
											当前积分
											<text class="num font-color-red">{{ userInfo.integral || 0 }}</text>
										</text>
										<checkbox value="true" :checked="useIntegral ? true : false"></checkbox>
									</label>
								</checkbox-group>
							</view>
						</view>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper" v-if="shipping_type === 0">
					<view>快递费用</view>
					<view class="discount">
						{{ orderGroupInfo.priceGroup.storePostage > 0 ? orderGroupInfo.priceGroup.storePostage : '免运费' }}
					</view>
				</view>
				<!--  -->
				<!-- -->
				<view  v-if="Isduihuanma"  class="item acea-row row-between-wrapper">
					<view style="display: flex;align-items: center;">
						<checkbox value="r1" style="transform:scale(0.7)" color="#e93323" :checked="dhnxz"
							@click="setdhnxz" />
						兑换码
						<view class="one" @click="goGuize">?</view>
				<!-- 		<image  class="one" src="https://yi.qj361.com/20210813165755_!.png"
							mode="widthFix"></image> -->
					</view>
					<view class="discount">
					</view>

					<view class="duihuanrecord"  v-if="dhnxz" v-for="(v,i) in list">
						<view class="record_1">
							<input type="text" placeholder='请输入兑换码' @input="getlistIndex(i)" @blur="getlist" />
						</view>
						<!-- <view class="record_2">￥{{v.value}}</view> -->
						<!-- <image @click="dellist(i)" class="record_3" src="../../../static/Hzimg/x.png" mode="widthFix"></image> -->
					</view>
					<view v-if="dhnxz" class="duihuanrecord" >
						<view class="record_btn" @click="setlist">
							添加
						</view>

					</view>
				</view>



				<view v-if="shipping_type === 1">
					<view class="item acea-row row-between-wrapper">
						<view>联系人</view>
						<view class="discount">
							<input type="text" placeholder="请填写您的联系姓名" v-model="contacts" />
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>联系电话</view>
						<view class="discount">
							<input type="text" placeholder="请填写您的联系电话" v-model="contactsTel" />
						</view>
					</view>
				</view>
				<view class="item">
					<view>备注信息（150字以内）</view>
					<textarea v-model="mark"></textarea>
				</view>
			</view>






			<view class="wrapper" v-if="!dhnxz">
				<view class="item">
					<view>支付方式</view>
					<view class="list">
						<view class="payItem acea-row row-middle" v-if="!isIntegral"
							:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="isWeixin">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''">
								</view>
								微信支付
							</view>
							<view class="tip">微信快捷支付</view>
						</view>
						<view class="payItem acea-row row-middle" v-if="!isIntegral"
							:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="!isWeixin">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''">
								</view>
								微信支付
							</view>
							<view class="tip">微信快捷支付</view>
						</view>
<!-- 						<view class="payItem acea-row row-middle" v-if="!isIntegral"
							:class="active === 'yue' ? 'on' : ''" @click="payItem('yue')">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-icon-test" :class="active === 'yue' ? 'bounceIn' : ''">
								</view>
								余额支付
							</view>
							<view class="tip">可用余额：{{ userInfo.nowMoney || 0 }}</view>
						</view> -->
						<view class="payItem acea-row row-middle" v-if="isIntegral"
							:class="active === 'integral' ? 'on' : ''" @click="payItem('integral')">
							<view class="name acea-row row-center-wrapper">
								<view class="iconfont icon-icon-test" :class="active === 'integral' ? 'bounceIn' : ''">
								</view>积分支付
							</view>
							<view class="tip">可用积分：{{ userInfo.integral || 0 }}</view>
						</view>
					</view>
				</view>
			</view>



			<view class="moneyList">
				<view class="item acea-row row-between-wrapper" v-if="orderPrice.totalPrice !== undefined">
					<view>商品总价：</view>
					<view class="money" v-if="!isIntegral">￥{{ orderPrice.totalPrice }}</view>
					<view class="money" v-if="isIntegral">{{ orderPrice.payIntegral }}积分</view>
				</view>
				<view class="item acea-row row-between-wrapper" v-if="orderPrice.payPostage > 0 && !isIntegral">
					<view>运费：</view>
					<view class="money">￥{{ orderPrice.payPostage }}</view>
				</view>
				<view class="item acea-row row-between-wrapper" v-if="orderPrice.couponPrice > 0 && !isIntegral">
					<view>优惠券抵扣：</view>
					<view class="money">-￥{{ orderPrice.couponPrice }}</view>
				</view>
				<view class="item acea-row row-between-wrapper" v-if="orderPrice.deductionPrice > 0 && !isIntegral">
					<view>积分抵扣：</view>
					<view class="money">-￥{{ orderPrice.deductionPrice }}</view>
				</view>
			</view>
			<view style="height: 120rpx"></view>
			<view class="footer acea-row row-between-wrapper">
				<view v-if="!Isduihuanma">
					合计:
					<text class="font-color-red" v-if="!isIntegral">￥{{ orderPrice.payPrice }}</text>
					<text class="font-color-red" v-if="isIntegral">{{ orderPrice.payIntegral }}积分</text>
				</view>
				<view v-if="Isduihuanma">

				</view>
				<view class="settlement" @click="createOrder">{{dhnxz?"兑换积分":"立即结算"}}</view>
			</view>
			<CouponListWindow v-on:couponchange="changecoupon($event)" v-model="showCoupon"
				:price="orderPrice.totalPrice" :checked="usableCoupon.id" @checked="changeCoupon" :cartid="cartid">
			</CouponListWindow>
			<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
				:checked="addressInfo.id" ref="mychild"></AddressWindow>


		</view>



	</view>


</template>
<style scoped lang="less">
	.one {
		margin-left: 10upx;
		width: 35upx;
		height: 35upx;
		border: 1px solid #AAAAAA;
		display: flex;
		color: #AAAAAA;
		font-weight: 900;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.duihuanitem {
		display: block;
		border: 1px solid red;
	}

	.duihuanrecord {
		padding-top: 10upx;
		width: 750upx;
		display: flex;
		justify-content: space-between;

		.record_1 {
			width: 500upx;
			color: #999;
		}

		.record_2 {
			color: red;
		}

		.record_3 {

			width: 40upx;
			height: 40upx;

		}

		.record_btn {
			margin-left: 300upx;

		}
	}

	.order-submission .wrapper .shipping select {
		color: #999;
		padding-right: 0.15 * 100rpx;
	}

	.order-submission .wrapper .shipping .iconfont {
		font-size: 0.3 * 100rpx;
		color: #515151;
	}

	.order-submission .allAddress {
		width: 100%;
		background-image: linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		background-image: -webkit-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		background-image: -moz-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		padding-top: 1 * 100rpx;
	}

	.order-submission .allAddress .nav {
		margin: 0 auto;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.order-submission .allAddress .nav .item {
		flex: 1;
		position: relative;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on:before {
		position: absolute;
		bottom: 0;
		content: '快递配送';
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #fff;
		z-index: 9;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
		content: '到店自提';
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .nav .item.on2 {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on2:before {
		position: absolute;
		bottom: 0;
		content: '到店自提';
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #d5e6e6;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
		content: '快递配送';
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .address {
		width: 6.91 * 100rpx;
		height: 1.5 * 100rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.order-submission .allAddress .line {
		width: 7.1 * 100rpx;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount input::placeholder {
		color: #ccc;
	}
</style>
<script>
	import OrderGoods from '@/components/OrderGoods'
	import CouponListWindow from '@/components/CouponListWindow'
	import AddressWindow from '@/components/AddressWindow'

	import {
		postOrderConfirm,
		postOrderComputedpoint,
		createOrder
	} from '@/api/order'
	import {
		mapGetters
	} from 'vuex'
	import {
		handleOrderPayResults,
		subscribeMessage
	} from '@/libs/order'
	import {
		weappPay
	} from '@/libs/wechat'
	import {
		isWeixin,
		handleErrorMessage
	} from '@/utils'

	const NAME = 'OrderSubmission',
		_isWeixin = isWeixin()
	export default {
		name: NAME,
		components: {
			OrderGoods,
			CouponListWindow,
			AddressWindow,

		},
		props: {},
		data: function() {
			return {
				fenleilist: [],
				Isduihuanma: false,

				index: "",
				list: [],
				item: '',

				classify: '',
				offlinePayStatus: 2,
				from: this.$deviceType,
				deduction: true,
				enableIntegral: true,
				enableIntegralNum: 0,
				isWeixin: _isWeixin,
				pinkId: 0,
				// active: _isWeixin ? 'weixin' : 'yue',
				active: 'weixin',
				showCoupon: false,
				showAddress: false,
				addressInfo: {},
				couponId: 0,
				orderGroupInfo: {
					priceGroup: {},
				},
				usableCoupon: {},
				addressLoaded: false,
				useIntegral: false,
				orderPrice: {
					payPrice: '计算中',
				},
				mark: '',
				systemStore: {},
				shipping_type: 0,
				contacts: '',
				contactsTel: '',
				storeSelfMention: 0,
				cartid: '',
				isIntegral: false,
				Duihuan: false,
				dhnxz: false,
			}
		},
		computed: mapGetters(['userInfo', 'storeItems']),
		watch: {
			useIntegral() {
				this.computedPrice()
			},
			$yroute(n) {
				if (n.name === NAME) this.getCartInfo()
			},
			shipping_type() {
				this.computedPrice()
			},
		},
		onShow: function() {
			let that = this
			this.$store.dispatch('getUser', true)
			that.getCartInfo()
			console.log(that.$yroute)
			if (that.$yroute.query.pinkid !== undefined) {
				that.pinkId = that.$yroute.query.pinkid
			}
			// this.isIntegral = that.$yroute.query.isIntegral == 'true'
			// this.useIntegral = this.isIntegral
			if (this.isIntegral) {
				this.active = 'integral'
			}
			if (that.$yroute.query.id !== undefined) {
				that.cartid = that.$yroute.query.id
				console.log(that.cartid)
			}
		},
		methods: {
			setdhnxz() {
				this.dhnxz = !this.dhnxz
				if(this.dhnxz){
					this.list=['']
				}else{
					this.list=[]
				}
			},

			setlist() {
				this.list.push("")
			},
			dellist(index) {
				this.list.splice(index, 1)
			},
			getlist(e) {

				this.list.splice(this.index, 1, e.target.value)

			},
			getlistIndex(index) {
				this.index = index
			},
			goGuize() {
				this.$yrouter.push({
					path: "/pages/HzPages/DuihuanGzView/DuihuanGzView",
				})
			},



			showStoreList() {
				this.$store.commit('get_to', 'orders')
				this.$yrouter.push({
					path: '/pages/shop/StoreList/index',
				})
			},
			addressType: function(index) {
				if (index && !this.systemStore.id) {
					uni.showToast({
						title: '暂无门店信息，您无法选择到店自提！',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				console.log(this)
				this.shipping_type = index
			},
			changeUseIntegral: function(e) {
				// this.computedPrice();
				if (this.isIntegral) {
					return
				}
				this.useIntegral = e.mp.detail.value[0]
			},
			computedPrice() {
				let shipping_type = this.shipping_type
				postOrderComputedpoint(this.orderGroupInfo.orderKey, {
					addressId: this.addressInfo.id,
					useIntegral: this.useIntegral ? 1 : 0,
					couponId: this.usableCoupon.id || 0,
					shipping_type: parseInt(shipping_type) + 1,
				}).then(res => {
					const data = res.data
					if (data.status === 'EXTEND_ORDER') {
						this.$yrouter.replace({
							path: '/pages/order/OrderDetails/index',
							query: {
								id: data.result.orderId,
							},
						})
					} else {
						this.orderPrice = data.result
					}
				})
			},
			FnDuihuanma(value) {
				console.log("value", value)
				this.Isduihuanma = true
				value.map((v, i) => {
					if (v.productInfo.classify != 1) {
						this.Isduihuanma = false
					}
          if (v.productInfo.classify ==1) {
            this.dhnxz = true
          }
          if (v.productInfo.classify ==3) {
            this.useIntegral = true
          }





        })
			},
			getCartInfo() {
				const cartIds = this.$yroute.query.id
				if (!cartIds) {
					uni.showToast({
						title: '参数有误',
						icon: 'none',
						duration: 2000,
					})
					return this.$yrouter.back()
				}
				postOrderConfirm(cartIds)
					.then(res => {
						this.fenleilist = res.data.cartInfo || []
						console.log(res);
						this.FnDuihuanma(this.fenleilist)
						this.offlinePayStatus = res.data.offline_pay_status
						this.orderGroupInfo = res.data
						console.log("orderGroupInfo", this.orderGroupInfo);
						if (this.orderGroupInfo.cartInfo.length > 0) {
							this.classify = this.orderGroupInfo.cartInfo[0].productInfo.classify
						}
						this.deduction = res.data.deduction
						this.usableCoupon = res.data.usableCoupon || {}
						this.addressInfo = res.data.addressInfo || {}
						// 用来显示到店自提的店铺地址
						this.systemStore = res.data.systemStore || {}
						this.storeSelfMention = res.data.storeSelfMention
						this.computedPrice()
					})
					.catch(() => {
						uni.showToast({
							title: '加载订单数据失败',
							icon: 'none',
							duration: 2000,
						})
					})
			},
			addressTap: function() {
				this.showAddress = true
				if (!this.addressLoaded) {
					this.addressLoaded = true
					this.$refs.mychild.getAddressList()
				}
			},
			addressRedirect() {
				this.addressLoaded = false
				this.showAddress = false
			},
			couponTap: function() {
				this.showCoupon = true
			},
			changeCoupon: function(coupon) {
				if (!coupon) {
					this.usableCoupon = {
						couponTitle: '不使用优惠券',
						id: 0,
					}
				} else {
					this.usableCoupon = coupon
				}
				this.computedPrice()
			},
			payItem: function(index) {
				console.log(index);
				this.active = index
			},
			changeAddress(addressInfo) {
				this.addressInfo = addressInfo
				this.computedPrice()
			},
			createOrder() {
				if (this.isIntegral) {
					// 积分支付
					if (this.userInfo.integral < this.orderPrice.payIntegral) {
						uni.showToast({
							title: '积分不足',
							icon: 'none',
							duration: 2000,
						})
						return
					}
					this.active = 'integral'
				}
				let shipping_type = this.shipping_type
				if (!this.isIntegral && !this.active) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				if (!this.addressInfo.id && !this.shipping_type) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none',
						duration: 2000,
					})
					return
				}

				if (this.shipping_type) {
					if ((this.contacts === '' || this.contactsTel === '') && this.shipping_type) {
						uni.showToast({
							title: '请填写联系人或联系人电话',
							icon: 'none',
							duration: 2000,
						})
						return
					}

					if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.contactsTel)) {
						uni.showToast({
							title: '请填写正确的手机号',
							icon: 'none',
							duration: 2000,
						})
						return
					}
					if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.contacts)) {
						uni.showToast({
							title: '请填写您的真实姓名',
							icon: 'none',
							duration: 2000,
						})
						return
					}
				}

				uni.showLoading({
					title: '生成订单中',
				})
				let from = {}
				if (this.$deviceType == 'app') {
					from.from = 'app'
				}
				// #ifdef MP-WEIXIN
				subscribeMessage()
				// #endif
				console.log("this.orderGroupInfo.orderKey");
				console.log(this.orderGroupInfo.orderKey);
				let cardPswd=[]
				let cardPswd2=[]
				this.list.map((v)=>{
					if(v!=''){
					cardPswd.push(v)
					}
				})

				if(this.dhnxz&&cardPswd.length==0){
					uni.showToast({
						title:"请填写兑换码",
						icon:"none",
						duration:2000
					})
					return
				}
				// cardPswd.map((v,i)=>{
				// 	cardPswd2.push("qj"+v)
				// })

				createOrder(this.orderGroupInfo.orderKey, {
						realName: this.contacts,
						phone: this.contactsTel,
						addressId: this.addressInfo.id,
						useIntegral: this.useIntegral ? 1 : 0,
						couponId: this.usableCoupon.id || 0,
						payType: this.active,
						pinkId: this.pinkId,
						seckillId: this.orderGroupInfo.seckill_id,
						combinationId: this.orderGroupInfo.combination_id,
						bargainId: this.orderGroupInfo.bargain_id,
						from: this.from,
						mark: this.mark || '',
						shippingType: parseInt(shipping_type) + 1,
						storeId: this.storeItems ? this.storeItems.id : this.systemStore.id,
						...from,
						cardPswd:JSON.stringify(cardPswd)
					})
					.then(res => {
						if(res.status!=200){
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:2000
							})
						}
						uni.hideLoading()

						handleOrderPayResults.call(this, res.data, 'create', this.active)


					})
					.catch(err => {
						handleErrorMessage(err, '创建订单失败')
					})
			},
		},
	}
</script>



